<!DOCTYPE html>
<html lang="en" class="yui3-loading">
<head>
    <meta charset="utf-8">
    <title>Creating an animated panel using transitions</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/combo?3.4.0/build/cssreset/reset-min.css&amp;3.4.0/build/cssfonts/fonts-min.css&amp;3.4.0/build/cssbase/base-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">


<style type="text/css">
	.yui3-panel {
  outline:none;
}

.yui3-panel #panelContent {
  -webkit-box-shadow: 0px 0px 2px black;
  -moz-box-shadow: 0px 0px 2px black;
  box-shadow: 0px 0px 2px black;
}
.yui3-panel #panelContent .yui3-widget-hd {
  font-weight:bold;
  padding:5px;

}

#panelContent .yui3-widget-bd {
  padding:15px;
  background:white;
  text-align:center;
}


.yui3-skin-sam .yui3-widget-mask {
  background-color: #223460;
  opacity: 0.9;
}

</style>

<h2>Creating an animated panel using transitions</h2>
<p>This example shows an animated modal form.
<input type="button" value="Open Panel" id="openButton"></p>
 
<p>Now let's fill this space with some text so that the modality kicks in.</p>

<p>Vestibulum quis purus metus. Quisque in adipiscing erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In vitae lacus tellus, non iaculis arcu. Donec nec risus diam. Vivamus sed mauris eros, nec ultrices nibh. Phasellus scelerisque aliquet mauris, faucibus aliquam ipsum tempor quis. Integer quis risus sed tellus ornare venenatis quis ut magna. Integer erat mauris, hendrerit faucibus iaculis eu, feugiat vitae massa. Aliquam mi augue, tincidunt id porttitor ut, lacinia sed eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed elementum fringilla urna vel cursus. Etiam et suscipit eros. In ornare lacinia est, sed bibendum ligula blandit nec. Vestibulum tristique pulvinar nunc, quis lacinia eros facilisis vel. Duis tristique porttitor risus, vel laoreet ligula mollis vitae. Nam ornare justo a turpis mattis cursus.</p>

 <div id="panelContent">
   <div class="yui3-widget-hd">
     Showing an animated panel
   </div>
   <div class="yui3-widget-bd">
     <p>Making panels animate is easy with the "transition" module!</p>
     
   </div>
 </div>
<script type="text/javascript">
	YUI().use("transition", "panel", function(Y) {
  var openBtn = Y.one('#openButton'),
  panel = new Y.Panel({
    srcNode: "#panelContent",
    width:330,
    xy: [300, -300],
    modal:true,
    visible:false,
    zIndex: 5,
    buttons: [
      {
        value: "Close the panel",
        action: function(e) {
          e.preventDefault();
          hidePanel();
        },
        section: "footer"
      }
    ],
    render:true
  }),

  bb = panel.get('boundingBox');

  openBtn.on('click', function(e) {
    showPanel();
  });

  function showPanel () {
    panel.show();
    bb.transition({
      duration: 0.5,
      top:"80px"
    });
  }

  function hidePanel () {
    bb.transition({
      duration: 0.5,
      top:"-300px"
    }, function() {
      panel.hide();
    });
  }
  
      
});
</script>


</body>
</html>
